<template>
  <div class="tj-table">
    <div class="tj-table-page">
      <div class="tj-table-page-content">
        <div class="tj-table-page-form">
          <el-select
            v-model="empId"
            clearable
            class="m-2"
            placeholder="员工"
            filterable
            @change="handlePageChange(1)"
            style="width: 300px"
          >
            <el-option
              v-for="item in dataSource"
              :key="item.empId"
              :label="item.empName"
              :value="item.empId"
            />
          </el-select>
          <DatePickerAll
            @change="CustomDatePickerChange"
            style="margin-left: 20px"
          ></DatePickerAll>
        </div>
        <div class="tj-table-page-table">
          <Table
            :columns="tableColumns"
            :loading="loading"
            :data-source="tableData"
          />
        </div>
        <div class="tj-table-page-pagination">
          <Pagination
            style="margin-left: auto"
            :count="total"
            :page-size="pageSize"
            :pageNo="currentPage"
            @onPagechange="handlePageChange"
            @onSizechange="handleSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import type { TableColumn } from '@/types/table';
import type { Employee, EmployeeQuery } from '@/types/employee';
import {
  getEmployeeList,
  empenable,
  empdisable,
  deleteEmployee,
  resetEmployeePassword,
} from '@/api/clinic';
import { ref } from 'vue';
import { getEmpRegDailyList } from '@/api/statistics/index';
const tableData = ref<any[]>([]);
const loading = ref(false);
const dataSource = ref<Employee[]>([]); // 数据源

const startime = ref('');
const endtime = ref('');

const CustomDatePickerChange = (e: any) => {
  //console.log(e);
  startime.value = e[0];
  endtime.value = e[1];
  handlePageChange(1);
};

const total = ref(0); // 总条数
const currentPage = ref(1); // 当前页
const pageSize = ref(10); // 每页条数
const empId = ref<any>('');
const tableColumns: TableColumn[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'empNo', label: '工号' },
  { prop: 'empName', label: '人员' },
  { prop: 'regCount', label: '挂号数' },
  { prop: 'paidCount', label: '已收费数' },
  { prop: 'refundedCount', label: '退号数' },
];

//弹窗调用

const handlePageChange = (page: number) => {
  //console.log('当前页:', page);
  currentPage.value = page;
  getEmpRegDailyListApi();
};
const handleSizeChange = (size: number) => {
  //console.log('每页条数:', size);
  currentPage.value = 1;
  pageSize.value = size;
  getEmpRegDailyListApi();
};

const route = useRoute();
const refreshEmployeeList = async () => {
  // 查询员工列表
  const params = {
    pageNo: currentPage.value,
    pageSize: 9999,
  };
  const res = await getEmployeeList(params);
  if (res.code != '200') {
    return;
  }
  dataSource.value = res.data.list;
};

const getEmpRegDailyListApi = async () => {
  loading.value = true;
  const res = await getEmpRegDailyList({
    empId: empId.value,
    startDate: startime.value,
    endDate: endtime.value,
    pageNo: currentPage.value,
    pageSize: pageSize.value,
  });
  if (res.code != '200') {
    return;
  }
  tableData.value = res.data.list;
  total.value = res.data.totalCount;
  loading.value = false;
};

onMounted(async () => {
  refreshEmployeeList();
  getEmpRegDailyListApi();
});
</script>

<style lang="scss" scoped>
.tj-table {
  height: 100%;
}
.tj-table-dialog {
  width: 80%;
  margin: 0 auto;
}
.tj-table-page {
  background: #fff;
  border-radius: 6px;
  height: 100%;
  .tj-table-page-nav {
    display: flex;
    align-items: center;
    justify-content: left;
    border-radius: 4px;
    border-bottom: 1px solid #e7e7e7;
    .el-dropdown-link {
      background: rgba(22, 173, 164, 0.08);
      border-radius: 0px 0px 0px 0px;
      padding: 16px 21px;
      cursor: pointer;
      color: var(--el-color-primary) !important;
      display: flex;
      font-size: 16px;
      align-items: center;
    }
  }
  .tj-table-page-content {
    padding: 10px 24px 20px;

    height: calc(100% - 64px);
    .tj-table-page-form {
      display: flex;
      align-items: center;
      .tj-table-page-form-right {
        margin-left: auto;
      }
    }
    .tj-table-page-table {
      margin-top: 22px;
      height: calc(100vh - 338px);
    }
    .tj-table-page-pagination {
      margin-top: 24px;
      display: flex;
      align-items: center;
      .tj-table-page-pagination-total {
        margin-right: auto;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.6);
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
